<template>
  <view class="h_body">
    <nut-popup position="bottom" :style="{ height: '50%' }" round v-model:visible="show">
      <goodsInfoPop :goodsPopPublic="goodsPopPublic" :popType="popType" :text="text" @publicResult="publicResult"></goodsInfoPop>
    </nut-popup>
    <view class="h_card goods_header">
      <view class="row">
        <view class="goods_header_row_top">
          <view class="goods_header_row_left">
            <span>货物名称</span>
            <span class="icon">*</span>
          </view>
          <view class="goods_header_row_right" @click="gotoContranband">了解禁运品</view>
        </view>
        <view class="goods_header_row_div" @click="openGoodsNamePop">
          <nut-input v-model="goodsInfo.goodsName" placeholder="请输入或选择货物名称" readonly/>
        </view>
      </view>
      <view class="row">
        <view class="goods_header_row_top">
          <view class="goods_header_row_left">
            <span>货物类型</span>
            <span class="icon">*</span>
          </view>
        </view>
        <view class="goods_header_row_div" @click="openGoodsTypePop">
          <nut-input v-model="goodsInfo.goodsType" placeholder="请输入或选择货物类型"  readonly/>
        </view>
      </view>
      <view class="row">
        <view class="goods_header_row_top">
          <view class="goods_header_row_left">
            <span>货物包装</span>
            <span class="icon">*</span>
          </view>
        </view>
        <view class="goods_header_row_div" @click="openGoodsPackingPop">
          <nut-input v-model="goodsInfo.packing" placeholder="请输入或选择货物包装" readonly/>
        </view>
      </view>

    </view>
    <view class="h_card goods_content">
      <view class="row">
        <view class="goods_content_left_text">货物重量</view>
        <view class="goods_content_right">
          <view class="computer">
            <nut-input-number min="0" v-model="goodsInfo.weigh" step="0.01" decimal-places="2" />
          </view>
          <view class="icon">Kg</view>
        </view>
      </view>
      <view class="row">
        <view class="goods_content_left_text">货物数量</view>
        <view class="goods_content_right">
          <view class="computer">
            <nut-input-number min="0" v-model="goodsInfo.goodsNumber" disabled />
          </view>
          <view class="icon">件</view>
        </view>
      </view>
<!--      <view class="row">-->
<!--        <view class="goods_content_left_text">货物体积</view>-->
<!--        <view class="goods_content_right">-->
<!--          <view class="computer">-->
<!--            <nut-input-number disabled v-model="goodsInfo.goodsVolume" min="0" step="0.01" decimal-places="2" />-->
<!--          </view>-->
<!--          <view class="icon">m³</view>-->
<!--        </view>-->
<!--      </view>-->
      <view class="goods_specifications">
        <view class="goods_specifications_list" v-for="(item,index) in goodsInfo.specifications" :key="index">
          <view class="goods_specifications_list_div" style=" margin-left: 24rpx;">
            <nut-input placeholder="长" v-model="item.l" type="number" @input="item.l = item.l.replace(/^(0+)|[^\d]+/g, '')" input-align="center" />
            <view class="d">cm</view>
          </view>
          <view class="icon">x</view>
          <view class="goods_specifications_list_div">
            <nut-input placeholder="宽" v-model="item.w" type="number" @input="item.w = item.w.replace(/^(0+)|[^\d]+/g, '')" input-align="center" />
            <view class="d">cm</view>
          </view>
          <view class="icon">x</view>
          <view class="goods_specifications_list_div">
            <nut-input placeholder="高" v-model="item.h" type="number" @input="item.h = item.h.replace(/^(0+)|[^\d]+/g, '')" input-align="center" />
            <view class="d">cm</view>
          </view>
          <view class="icon">x</view>
          <view class="goods_specifications_list_div">
            <nut-input placeholder="件数" v-model="item.sum" type="number" @input="item.sum = item.sum.replace(/^(0+)|[^\d]+/g, '')" input-align="center" />
            <view class="d">件</view>
          </view>
          <view @click="addSpecifications" v-if="index==0">
            <image src="@/assets/images/index/woyaofahuo_icon_tianjiaguige.png"></image>
          </view>
          <view @click="delSpecifications(index)" v-else>
            <image src="@/assets/images/index/woyaofahuo_icon_shanchuguige.png"></image>
          </view>
        </view>
      </view>
    </view>

    <view class="goods_foot">
      <view class="button" @click="sure">确 定</view>
    </view>
  </view>
</template>
<script setup lang='ts'>
import { ref, watch } from "vue";
import { GoodsType } from "./goodsType";
import useSendGoodsStore from "../../store/sendGoods";
import { useDidShow } from "@tarojs/taro";
import goodsInfoPop from "./goodsInfoPop.vue";
import { publicInfo } from "@/@api/index";
import Taro from "@tarojs/taro";
//初始化
useDidShow(async () => {
  //初始化判断是新增还是修改货物信息
  console.log(sendGoodsStore.goodsAddOrEditIndex, "diandiandaindiadnaidni");

  if (sendGoodsStore.goodsAddOrEditIndex !== null) {
    goodsInfo.value =
      sendGoodsStore.goodsInfo[sendGoodsStore.goodsAddOrEditIndex];
  } else {
    goodsInfo.value = {
      goodsName: "",
      goodsVolume: "",
      goodsNumber: "",
      goodsType: "",
      packing: "",
      weigh: "",
      specifications: [
        {
          w: "",
          h: "",
          l: "",
          sum: "",
        },
      ],
    };
  }

  console.log(goodsInfo.value,'当前货物规格')


  //填写信息返回
  let pages = Taro.getCurrentPages();
  let currPage = pages[pages.length - 1];
  if (currPage.__data__.goodsName) {
    goodsInfo.value.goodsName = currPage.__data__.goodsName
  }
  if (currPage.__data__.goodsType) {
    goodsInfo.value.goodsType = currPage.__data__.goodsType
  }
  if (currPage.__data__.packing) {
    goodsInfo.value.packing = currPage.__data__.packing
  }


  console.log(goodsInfo.value);
});

//确定
function sure() {
  if (goodsInfo.value.goodsName == "") {
    Taro.showToast({
      icon: "none",
      title: "货物名称不能为空",
    });
    return;
  }
  if (goodsInfo.value.goodsType == "") {
    Taro.showToast({
      icon: "none",
      title: "货物类型不能为空",
    });
    return;
  }
  if (goodsInfo.value.packing == "") {
    Taro.showToast({
      icon: "none",
      title: "货物包装不能为空",
    });
    return;
  }
  if (goodsInfo.value.weigh == "") {
    Taro.showToast({
      icon: "none",
      title: "货物重量不能为空",
    });
    return;
  }
  if (goodsInfo.value.goodsNumber == "") {
    Taro.showToast({
      icon: "none",
      title: "货物数量不能为空",
    });
    return;
  }
  let v = false;
  goodsInfo.value.specifications.forEach((item) => {
    if (!(item.h && "" && item.w == "" && item.l == "" && item.sum == "")) {
      if (item.h == "" || item.w == "" || item.l == "" || item.sum == "") {
        v = true;
      }
    }
  });
  if (v) {
    Taro.showToast({
      icon: "none",
      title: "请填写完整的货物规格",
    });
    return;
  }
  if (sendGoodsStore.goodsAddOrEditIndex != null) {
    sendGoodsStore.goodsInfo[sendGoodsStore.goodsAddOrEditIndex] =
      goodsInfo.value;
  } else {
    sendGoodsStore.goodsInfo.push(goodsInfo.value);
  }

  let vo = 0;
  let w = 0;
  let n = 0;
  sendGoodsStore.goodsInfo.forEach((it) => {
    vo = vo + Number(it.goodsVolume);
    w = w + Number(it.weigh);
    n = n + Number(it.goodsNumber);
  });

  sendGoodsStore.goodsNumber = n;

  sendGoodsStore.goodsVolume = vo;

  sendGoodsStore.weigh = w;
  let pages = Taro.getCurrentPages();
  let prevPage = pages[pages.length - 2]
  prevPage.setData({
    changeGoods: true
  })
  Taro.navigateBack();
}
//体积计算
function volumeCount() {
  let all = 0;
  goodsInfo.value.specifications.forEach((item) => {
    all =
      all +
      Number(item.h != "" ? item.h : 0) *
        Number(item.l != "" ? item.l : 0) *
        Number(item.w != "" ? item.w : 0) *
        Number(item.sum != "" ? item.sum : 0);
  });
  if (all == 0) {
    goodsInfo.value.goodsVolume = "0"
  } else {
    goodsInfo.value.goodsVolume = String(all / 1000000)
  }
  console.log(goodsInfo.value.goodsVolume,'哈哈哈')
}
function gotoContranband() {
  Taro.navigateTo({
    url: "/pages/sendGoods/contraband",
  });
}
const goodsPopPublic = ref<any>([]);
//弹出框  0 货物名称 1 货物类别 2 货物包装
const popType = ref<string>("0");
//弹出框
const show = ref<boolean>(false);
//弹出框提示
const text = ref<string>("");
//打开弹窗
async function openGoodsNamePop() {
  Taro.navigateTo({
    url: '/pages/sendGoods/goodsName'
  })
}
async function openGoodsTypePop() {
  Taro.navigateTo({
    url: '/pages/sendGoods/goodsType'
  })
}
async function openGoodsPackingPop() {
  Taro.navigateTo({
    url: '/pages/sendGoods/packing'
  })
}
//弹窗返回
function publicResult(e: string) {
  show.value = false;
  if (popType.value == "0") {
    goodsInfo.value.goodsName = e;
  } else if (popType.value == "1") {
    goodsInfo.value.goodsType = e;
  } else if (popType.value == "2") {
    goodsInfo.value.packing = e;
  }
}
//发货页面仓库信息
const sendGoodsStore = useSendGoodsStore();
//计数器
const value = ref(1);
//整个货物大变量
const goodsInfo = ref<GoodsType>({
  goodsName: "",
  goodsVolume: "",
  goodsNumber: "",
  goodsType: "",
  packing: "",
  weigh: "",
  specifications: [
    {
      w: "",
      h: "",
      l: "",
      sum: "",
    },
  ],
});
// 货物规格新增
function addSpecifications() {
  goodsInfo.value.specifications.push({
    w: "",
    h: "",
    l: "",
    sum: "  ",
  });
}
// 货物规格删除
function delSpecifications(index: number) {
  goodsInfo.value.specifications.splice(index, 1);
}


watch(()=>goodsInfo.value.specifications,(newVal)=>{
  goodsInfo.value.goodsNumber = newVal.reduce((total, item)=>{
    return Number(total) + Number(item.sum||0)
  },0)
  volumeCount()
},{deep: true})
</script>
<style lang="scss">
.goods_foot {
  width: 100%;
  height: 128rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0;
  z-index: 4;
  background-color: #fff;
  .button {
    width: 702rpx;
    height: 88rpx;
    background: linear-gradient(90deg, #0966ff 2%, #0658de 99%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border-radius: 44rpx;
    font-size: 32rpx;
  }
}
.goods_header {
  margin-top: 25rpx;
  .row {
    width: 100%;
    height: 191rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-bottom: 1rpx #f5f5f5 solid;
    .goods_header_row_top {
      height: 60rpx;
      width: 654rpx;
      //   background-color: red;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .goods_header_row_left {
        font-family: PingFang SC Medium;
        font-size: 28rpx;
        color: #252525;
        font-weight: 700;
        display: flex;
        .icon {
          color: red;
          margin-left: 10rpx;
        }
      }
      .goods_header_row_right {
        font-family: PingFangSC-Regular;
        font-size: 24rpx;
        color: #666666;
      }
    }
    .goods_header_row_div {
      height: 72rpx;
      width: 654rpx;
      background: #f5f5f5;
      display: flex;
      align-items: center;
      position: relative;
      .nut-input {
        padding: 0;
        height: 40rpx;
        width: 550rpx;
        background-color: unset;
        border: none;
      }
    }
  }
}
.goods_content {
  margin-top: 25rpx;
  margin-bottom: 200rpx;
  .row {
    height: 104rpx;
    width: 100%;
    display: flex;
    align-items: center;
    .goods_content_left_text {
      font-family: PingFang SC Medium;
      font-size: 28rpx;
      font-weight: 700;
      margin-left: 24rpx;
    }
    .goods_content_right {
      margin-left: 230rpx;
      display: flex;
      .computer {
        width: 242rpx;
        height: 64rpx;
        border-radius: 8rpx;
        box-sizing: border-box;
        border: 1rpx solid #c4c4c4;
        display: flex;
        align-content: center;
        justify-content: center;
        .nut-input-number .h5-input,
        .nut-input-number__text--readonly,
        .nut-input-number__text--input {
          width: 114rpx;
        }
      }
      .icon {
        font-family: PingFangSC-Semibold;
        font-size: 28rpx;
        font-weight: 700;
        color: #252525;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 32rpx;
      }
    }
  }
  .goods_specifications {
    width: 100%;
    .goods_specifications_list {
      width: 100%;
      height: 80rpx;
      display: flex;
      align-items: center;
      margin-bottom: 12rpx;
      .icon {
        width: 34rpx;
        text-align: center;
      }
      image {
        width: 32rpx;
        height: 32rpx;
        margin-left: 26rpx;
      }
      .goods_specifications_list_div {
        width: 124rpx;
        height: 64rpx;
        background: #f5f5f5;
        display: flex;
        align-items: center;
        .nut-input {
          padding: 0;
          width: 80rpx;
          background-color: unset;
        }
        .d {
          height: 100%;
          width: 44rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: PingFangSC-Regular;
          font-size: 24rpx;

          color: #666666;
        }
      }
    }
  }
}
.goods_header_row_div:before {
  position: absolute;
  top: 0;
  right: 30px;
  bottom: 0;
  display: block;
  margin: auto;
  width: 30px;
  height: 30px;
  color: #8799a3;
  content: "\e6a3";
  text-align: center;
  font-size: 34px;
  font-family: cuIcon;
  line-height: 30px;
}
</style>
